<template>
  <div>
    <BasicTable @register="registerTable">
      <!-- 表格工具栏按钮-->
      <template #toolbar>
        <a-button type="primary" @click="sync"> 同步 </a-button>
      </template>

      <!-- 按钮区 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex justify-center">
            <TableAction
              :actions="[
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  popConfirm: {
                    title: '是否确认删除',
                    placement: 'top',
                    confirm: remove.bind(null, record),
                  },
                },
              ]"
            />
          </div>
        </template>
      </template>
    </BasicTable>

    <ImportWindow ref="importRef" @success="reload" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema, TagRender } from '@/components/Table';

  import { useMessage } from '@/hooks/web/useMessage';
  import { deleteById, batchDelete, update, tree } from '@/api/authority/api';
  import { sync } from '@/api/toolkit/api';

  import { ref } from 'vue';

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'Api' });

  const importRef = ref<any>(null);

  // 搜索面板
  const searchFormSchema: FormSchema[] = [
    {
      field: 'moduleName',
      label: '模块',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'name',
      label: '名称',
      component: 'Input',
      colProps: { span: 6 },
    },
    {
      field: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '启用', value: 1 },
          { label: '停用', value: 0 },
        ],
        placeholder: '全部',
      },
      colProps: { span: 4 },
    },
  ];

  // 表格列
  const columns: BasicColumn[] = [
    {
      title: '名称',
      dataIndex: 'name',
      width: '12rem',
      align: 'left',
    },
    {
      title: '接口地址',
      dataIndex: 'requestUri',
      width: '12rem',
      align: 'left',
    },
    {
      title: '模块',
      dataIndex: 'moduleName',
      width: '8rem',
    },
    {
      title: '类型',
      dataIndex: 'httpMethod',
      width: '5rem',
      customRender: ({ record }) =>
        TagRender({
          value: record.httpMethod,
          items: [
            { text: 'GET', value: 'Get', color: 'blue' },
            { text: 'POST', value: 'Post', color: 'green' },
            { text: 'PUT', value: 'Put', color: 'pink' },
            { text: 'DELETE', value: 'Delete', color: 'red' },
          ],
        }),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '5rem',
      customRender: ({ record }) =>
        TagRender({
          value: record.status,
          items: [
            { text: '启用', value: '1', color: 'green' },
            { text: '停用', value: '0', color: 'red' },
          ],
        }),
    },
    {
      title: '权限标识',
      dataIndex: 'perms',
      width: '10rem',
      align: 'left',
    },
  ];

  // 注册表格
  const [registerTable, { reload, getSelectRowKeys }] = useTable({
    title: 'Api列表',
    api: tree,
    columns,
    useSearchForm: true, // 搜索框配置: 是否打开搜索框、搜索框配置
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    // 表格配置:
    showTableSetting: true, // 是否显示设置按钮
    tableSetting: {
      size: false,
      setting: false,
      expandAll: true,
    },
    bordered: true, // 是否包含边框
    showIndexColumn: false, // 是否包含索引列
    rowKey: 'id',
    isTreeTable: false,
    accordion: false,
    titleHelpMessage: '数据源为 Spring 容器中注册的 IBaseController 类型',
  });

  // 删除
  async function remove(record: Recordable) {
    await deleteById(record.id);
    useMessage().createMessage.success('删除生成成功');
    reload();
  }

  // 批量删除
  async function batchRemove() {
    let ids: any[] = getSelectRowKeys();
    if (ids.length <= 0) {
      useMessage().createMessage.warn('未选择记录');
      return;
    }

    let resp = await batchDelete(ids);
    useMessage().createMessage.success('成功删除' + resp + '条记录');
    await reload();
  }
</script>
